import React, { useState, useEffect } from 'react';
import { connect } from 'dva';
import { Icon, Modal, Form, Input, Select, Upload, Button } from 'antd';
//@ts-ignore
import LzEditor from 'react-lz-editor';
import Service from '@/public/http/services';
import style from './index.css';
const { TextArea } = Input;
const { Option } = Select;
const CreateModal: React.FC<any> = ({ formData,visible,title, onOK, onCancel, form, dispatch }) => {
  const [valist, setValist] = useState([] as any);
  const [specttitle, setSpecTitle] = useState('');
    useEffect(() => {
        if(visible) {
          if(formData.propertyNameList){
            var arry = [] as any[]
            for(let i=0;i<formData.propertyNameList.length;i++){
              arry.push(formData.propertyNameList[i].value)
            }
            setValist(arry)
          }

        }
    }, [visible, formData])
    const formItemLayout = {
      labelCol: { span: 5 },
      wrapperCol: { span: 14 },
    }
    const { getFieldDecorator } = form;

    const addrow = res=>{
      var arry = [...valist,'']
      setValist(arry)
    }

    const settitlefunc = event=>{
      setSpecTitle(event.target.value)

    }

    const changev = (index,event)=>{
      valist[index] = event.target.value
      setValist(valist)

    }


    return (
        <Modal
            visible={visible}
            title={title}
            okText={'保存'}
            cancelText={'取消'}
            onOk={() => {
                onOK && onOK(form,{valist})
            }}
            onCancel={() => {

                onCancel(form)
            }}
            width={'65%'}
        >
          <div>

            <Form.Item {...formItemLayout} label={'规格名称'}>
              {
                getFieldDecorator('groupName', {
                  initialValue: formData.groupName,
                  rules: [{ required: true, message: '请输入规格名称' }],
                })(<Input className={style.w220} placeholder={'请输入规格名称'} />)
              }
            </Form.Item>
            <Form.Item {...formItemLayout} label={'规格值'}>
              {
                getFieldDecorator('valueName', {
                  initialValue: valist,
                  rules: [{ required: true, message: '请输入规格值' }],
                })(
                  <div>
                    {valist.map((item:any,index) =>
                      <Input key={index} className={style.vvinput} placeholder={'请输入规格值'} value={valist[index]}  onChange={e=>changev(index,e)}/>
                    )}
                    <div>
                      <Button type={'primary'} onClick={addrow}>新增</Button>
                    </div>
                  </div>
                )
              }
            </Form.Item>
          </div>

        </Modal>
    );
}
const WrappedCreateModal = Form.create<any>({ name: 'modalForm' })(CreateModal);
export default connect((state: any) => {
    return {
    }
})(WrappedCreateModal);
